<script setup lang="ts">
import service1 from "~/assets/images/service/service1.png";
import service2 from "~/assets/images/service/service2.png";
import service3 from "~/assets/images/service/service3.png";

defineOptions({
  name: "service",
});

const serviceList = [
  {
    image: service1,
    title1: "公司注册",
    title2: "全链服务",
    desc: "助力企业注册，引导中小企业发展",
  },
  {
    image: service2,
    title1: "全业领域",
    title2: "全链服务",
    desc: "与各领域强劲企业达成合作 全领域服务一站解决",
  },
  {
    image: service3,
    title1: "物理租赁",
    title2: "一站解决",
    desc: "助力中小企业解决办公问题 多种类随意挑选",
  },
];
</script>

<template>
  <div class="grid grid-cols-3 gap-16 mt-7">
    <div
      class="bg-white rounded-lg px-8 pt-8 pb-2"
      v-for="(item, index) in serviceList"
      :key="index"
    >
      <div class="float-right text-gray-400 flex items-center">
        <span>查看详情</span>
        <Icon name="icon-park-outline:right" class="text-2xl" />
      </div>
      <div class="text-3xl">{{ item.title1 }}</div>
      <div class="text-3xl mt-3">{{ item.title2 }}</div>
      <div class="text-gray-400 mt-8">{{ item.desc }}</div>
      <div class="text-center mt-10">
        <el-image
          :src="item.image"
          style="width: 210px; height: 210px"
        ></el-image>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
